<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery.js" type="text/javascript"></script>
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
    }

    canvas {
        display: block;
    }
</style>

<body>
    <canvas id="canvas0"></canvas>
</body>
<script>
    $(document).ready(function () {
        var canvas = $("#canvas0");
        var ctx = canvas.get(0).getContext("2d");//创建2d上下文

        //自适应
        function resize() {
            var canvasheight = $(window).get(0).innerHeight + "px";
            var canvaswidth = $(window).get(0).innerWidth + "px";
            canvas.attr("width", canvaswidth);
            canvas.attr('height', canvasheight);
            console.log(canvasheight + "--" + canvaswidth);
        }
        resize();

        $(window).resize(function () {
            resize();
        })

        var radiu=5;
        var radiu1=100;
        var sudu=1;
        var ang=0;
        ctx.beginPath();
            ctx.fillStyle = "#000";
            ctx.arc(200, 200, radiu, 0, Math.PI * 2, false);
            console.log(radiu);
            ctx.closePath();
            ctx.stroke();
        function getr(){
            
            if(ang>=0&&ang<2){
                ang=ang+0.1;
            }else if(ang>=2){
                ang=0
            };
            ctx.beginPath();
           
            ctx.fillStyle = "#000";
            
            if(radiu<100&&radiu>=1){
                sudu=sudu*1;
                radiu=radiu+sudu;
                
                clear();
                
            }else if(radiu>=100){
                sudu=sudu*(-1);
                radiu=radiu+sudu;
                console.log(radiu);
                clear();
            }else if(radiu==0){
                sudu=sudu*(-1);
                radiu=radiu+sudu;
                
                clear();
            }
           
            
            console.log(radiu);
            ctx.arc(200, 200, radiu, 0, Math.PI * 2, false);
            ctx.closePath();
            ctx.stroke();
            
            
        }
       function clear(){
          ctx.clearRect(0, 0, canvas.width(), canvas.height());
       }
        //绘制    
       

        setInterval(function(){
            getr();
        },33);
       
        
        // setInterval(function(){
        //     clear();
        // },2400);

    });

</script>

</html>